<template>
	<view class="main">
		<tou_hand1 handtitle='端口码管理'></tou_hand1>
		<view class="show">
			<view class="one">
				<input v-model="portCode" placeholder='端口码'/>
				<input v-model="posts" placeholder='端口号'/>
				<view class="onetap" @click="selbtn">搜索</view>
			</view>
			<view class="three">
				<view class="threetap" @click="addbtn">绑定总码</view>
				<view class="threetap" @click="dkbtn">绑定端口</view>
			</view>
			<view class="stwo">
						<van-cell v-for="(item, index) in list" :key="index">
							<view class="twotap">
								<view class="twotapshang">
									<view>
										<view>设备号:{{item.code}}</view>
										<view>端口码:{{item.portCode}}</view>
									</view>
									<view class="twotapshangbtn" @click="delbtn(item.id)">删除</view>
								</view>
								<view class="twotapxia">
									<span style='margin-right: 20upx;'>端口号:{{item.ports}}</span>
									创建时间:{{item.createTime}}
								</view>
							</view>
						</van-cell>

			</view>
		</view>	
	</view>
</template>

<script>
	import tou_hand1 from '../../components/tou_hand1/tou_hand1.vue'
	// import wx from "../../common/jweixin-module/index.js"
	// import {
	// 	Dialog
	// } from 'vant';
	export default {
		components: {tou_hand1},
		mounted() {
			
		},

		data() {
			return {
				list:[],
				loading: false,
				finished: false,
				refreshing: false,
				pageNum: 1, //页码
				pageSize: 100, //每页显示的条数
				deviceId:'',//16进制设备号
				portCode:'',//端口码
				posts:'',//端口号
				
			}
		},
		onShow() {
			this.list = [];
			this.onRefresh();
		},
		onLoad(options) {
			this.deviceId=options.deviceId
			
		},
		methods: {
			
			loadMore() {
			
				if (this.refreshing) {
					this.list = [];
					this.refreshing = false;
				}
				const that = this;
				let data = {
					pageNum: that.pageNum,
					pageSize: that.pageSize,
					deviceId:that.deviceId,
					portCode:that.portCode,
					ports:that.posts
				}
				that.loading = true;
				that.$base.request1('manager/portCode/list', 'GET', data)
					.then(res => {
						that.loading = false;
						if (res.data.rows && res.data.rows.length > 0) {
							var arr = res.data.rows
							for(var i=0;i<arr.length;i++){
								if(arr[i].ports!='FF'){
									arr[i].ports='0'+(Number(arr[i].ports)+1)
								}
							}
							that.list = that.list.concat(arr);
							that.pageNum += 1;
						} else {
							that.finished = true;
						}
					})
					.catch(err => {
			
					})
			},
			onRefresh() {
				// 清空列表数据
				this.finished = false;
				this.pageNum = 1
			 // 重新加载数据
				// 将 loading 设置为 true，表示处于加载状态
				this.loading = true;
				this.loadMore();
			},
			addbtn(){
				let _this = this;
				uni.scanCode({
					scanType: ['qrCode', 'barCode'],
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						var str = res.result;
						var dk = str.split('/')
						console.log('端口号：', dk[4])
						
						if (dk[4].substr(-2, 2) == '00') {
							_this.jkbtn(dk[4]);
						} else {
							uni.showToast({
								title: '请扫描正确二维码',
								duration: 2000,
								icon: "error"
							});
							return
						}
					}
				});
			},
			jkbtn(portDevice){
				let data = {
					deviceId: this.deviceId,
					portDevice: portDevice,
					ports:'FF'
				}
				this.$base.request1('manager/portCode/add', 'POST', data)
				.then(res => {
					if (res.data.code == '200') {
						uni.showToast({
							title: '添加成功',
							duration: 2000,
						});
						this.list = [];
						this.onRefresh()
						this.addbtn()
					}else{
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: "error"
						});
						return
					}
				})
				.catch(err => {
						
				})
			},
			dkbtn(){
				uni.navigateTo({
					url: '/manager_pages/port_list/port_list?deviceId=' + this.deviceId
				});
			},
			delbtn(id){
				uni.showModal({
					title: '提示',
					content: '确认删除？',
					success: function (res2) {
						if (res2.confirm) {
							this.$base.request1('manager/portCode' + '/' + id, 'DELETE')
							.then(res => {
								if (res.data.code == '200') {
									this.list = [];
									uni.showToast({
										title: '删除成功',
										duration: 2000,
									});
									this.onRefresh()
								}else{
									uni.showToast({
										title: res.data.msg,
										duration: 2000,
										icon: "error"
									});
									return
								}
							})
							.catch(err => {
									
							})
						} else if (res2.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			selbtn(){
				this.list = [];
				this.onRefresh()
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;

		/deep/.van-list__finished-text {
			line-height: 500upx;
		}
		.show {
			width: 100%;
			box-sizing: border-box;
			/deep/.van-popup {
				border-radius: 16upx;
			}
			.one{
				width: 650upx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				margin: 32upx auto;
				input{
					width: 200upx;
					height: 64upx;
					border: 1upx solid #b0b0b0;
					padding-left: 20upx;
					border-radius: 10upx;
					margin-right: 20upx;
					font-size: 28upx;
				}
				.uni-input-placeholder{
					font-size: 28upx;
				}
				.onetap{
					width: 150upx;
					box-sizing: border-box;
					padding: 12upx 0;
					background-color: #4B98ED;
					color: #fff;
					text-align: center;
					border-radius: 10upx;
					margin-left: 20upx;
					font-size: 28upx;
				}
			}
			.stwo{
				width: 650upx;
				box-sizing: border-box;
				margin: 0 auto;
				/deep/.van-cell{
					border-radius: 20upx;
					margin-bottom: 20upx;
					display: flex;
				}
				.twotap{
					padding: 15upx 10upx;
					.twotapshang{
						font-size: 30upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						color: #333333;
						box-sizing: border-box;
						padding: 10upx 20upx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.twotapshangbtn{
							width: 120upx;
							box-sizing: border-box;
							padding: 8upx 0;
							background-color: red;
							color: #fff;
							text-align: center;
							border-radius: 10upx;
							font-size: 28upx;
						}
					}
					.twotapxia{
						font-size: 26upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						color: #686868;
						box-sizing: border-box;
						padding:0 20upx;
						padding-bottom: 10upx;
					}
				}
			}
			.three{
				width:650upx;
				margin: 0 auto;
				margin-bottom: 20upx;
				display: flex;
				justify-content: space-between;
				background-color: #fff;
				box-sizing: border-box;
				padding: 25upx 140upx;
				border-radius: 10upx;
				.threetap{
					width: 150upx;
					box-sizing: border-box;
					padding: 12upx 0;
					background-color: #4B98ED;
					color: #fff;
					text-align: center;
					border-radius: 10upx;
					font-size: 28upx;
				}
			}
			
		}

	}
</style>
